
<template>
  <div >
      <basic-container  v-if="true" >
          <div style="height: 300px;text-align: center;">
              <div style="display: inline-block;margin-top: 130px;color: #b7b5b5;letter-spacing: 5px;">该功能待开发</div>
          </div>
      </basic-container>
      <basic-container v-else>
        <el-form ref="formSearch" :model="formSearch" label-width="100px" size="small" :inline="true">
            <el-form-item>
                <el-button  type="primary" @click="handleAdd">添加</el-button>
            </el-form-item>
            <el-form-item>
                <el-button  @click="handleExport()">导出</el-button>
            </el-form-item>
            <el-form-item label="样品分类:">
                <el-select v-model="formSearch.type" placeholder="样品分类">
                    <el-option label="全部" :value="0"></el-option>
                    <el-option label="未留样" :value="1"></el-option>
                    <el-option label="已留样" :value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="检测项目:">
                <el-select v-model="formSearch.stutas" placeholder="检测项目" style="width:100px">
                    <el-option v-for='(v,i) in testItems' :key='i' :label="v.name" :value="v.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-input v-model="formSearch.name" placeholder="请输入样品编码/名称、留样人"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchFormSubmit()">搜索</el-button>
            </el-form-item>
            <el-form-item>
                <el-button @click="handleReset">重置</el-button>
            </el-form-item>
        </el-form>
        <!-- 表格 -->
        <avue-crud :option="tableOption" :data="tableData" :table-loading="tableLoading" :page="page" ref="crud" @current-change='currentPage' @selection-change='selectionChange'>
            <template slot-scope="scope" slot="handleTime">
                {{scope.row.status==1?'未留样':'已留样'}}
            </template>
            <template slot-scope="scope" slot="status">
                {{scope.row.status==1?'未留样':'已留样'}}
            </template>
            <template slot-scope="scope" slot="editTime">
                {{scope.row.name}}<span>-</span>{{scope.row.state}}
            </template>
            <template slot-scope="scope" slot="menu">
                <el-button type="primary" size="small"  plain @click.stop="handleEdit(scope.row,scope.index)">修改</el-button>
                <el-button type="primary" size="small"  plain @click.stop="handleDelete(scope.row,scope.index)">删除</el-button>
            </template>
        </avue-crud>
    </basic-container>
    <!-- 修改/新增-->
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="30%">
        <el-form ref="dialogForm"  :model="dialogForm" :rules="rules"    label-position="left" label-width="110px">
            
            <el-form-item label="样品编码：" prop='sn'>
                <el-input v-model="dialogForm.sn" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="样品名称：" prop='name'>
                <el-input v-model="dialogForm.name" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="检测项目：" prop='items'>
               <el-select v-model="dialogForm.items" placeholder="检测项目" style="width:100%">
                    <el-option v-for='(v,i) in testItems' :key='i' :label="v.name" :value="v.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="检测结果：" prop='result'>
                <el-input v-model="dialogForm.result" placeholder=""></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align:center">
            <el-button size="small"  @click="dialogFormVisible = false">关 闭</el-button>
            <el-button size="small"  type="primary" @click="handleAddLine('dialogForm')">确 认</el-button>
        </div>
    </el-dialog>
    
  </div>
</template>

<script>
import { listOption } from "@/const-personal/sample/artificial.js"
import { validateAcquaintance } from "@/util/validate.js"
import excel from '@/util/excel'
export default {
  name: "SampleArtificial",
  data() {
    return {
        formSearch: {
            date: "",
            name: "",
            type: 0,
            stutas:0,
            checked:false
        },
        tableOption:listOption,
        page: {
            total: 10, //总页数
            currentPage: 1, //当前页数
            pageSize: 10, //每页显示多少条
            pageSizes:[10]
        },
        tableLoading: false,
        tableData:[{id:0,status:2},{id:2,status:1}],//数据
        // 修改/新增
        dialogTitle:'添加检测数据',
        dialogFormVisible:false,
        rules:{
            items:[{required: true,message: '请选择检测项目',trigger: 'change'}],
            result:[{required: true,message: '请输入检测结果',trigger: 'blur'}],
            name:[{required: true,message: '请输入样品名字',trigger: 'blur'}],
            sn:[{required: true,message:'请输入样品编码',trigger: 'change'}],
        },
        dialogForm:{},
        sampleType:[{id:1,name:"lei1"},{id:2,name:"lei1"}], //样品分类
        testItems:[{id:0,name:'项目1'},{id:1,name:'项目2'}],//检测项目
        tableSelectedIds:[]
    }
  },
  methods: {
    // 搜索
    searchFormSubmit() {},
    // 重置
    handleReset() {},
    // 切换页面
    currentPage(val){
        console.log(val)
    },
    // 新增
    handleAdd(){
        this.dialogFormVisible=true;
        this.dialogTitle='添加检测数据';
        this.dialogForm={
            result:'',
            name:'',
            items:null,
            sn:''
        }
    },
    // 修改
    handleEdit(row,index){
        console.log(row,index)
        this.dialogFormVisible=true;
        this.dialogTitle='修改检测数据';
    },
    // 删除
    handleDelete(row,index){

    },
    // 确认新增/修改
    handleAddLine(formName){
        this.$refs[formName].validate((valid) => {
            if (valid) {
                this.$refs[formName].resetFields();
            }
        })
    },
    // 导出
    handleExport(){
        let selectedTabDatas = this.tableSelectedIds;
      if (selectedTabDatas.length > 0) {
        let filterTabDatas = [];
        selectedTabDatas.forEach(item => {
          let data = this.tableData.find(itm => {
            return item === itm.id
          })
          if (data) filterTabDatas.push(data)
        })
        const params = {
          title: ['序号', '样品分类', '样品编码', '样品名称','检测编码','检测项目','检测结果','最后修改人','时间'],
          key: ['id', 'name', 'phone', 'date'],
          data: filterTabDatas,
          autoWidth: true,
          filename: '设备转入数据'
        }
        excel.export_array_to_excel(params)
      } else {
        this.$message({
          type: 'info',
          message: '请选择要导出的数据'
        });
      }
    },
    // 多选
    selectionChange(selection){
        this.tableSelectedIds = selection.map(item => item.id);
        console.log(selection)
    }
  }
};
</script>

<style scoped>
</style>